<template>
  <div>
    <el-form
      label-position="left"
      ref="addForm"
      :model="addForm"
      label-width="100px"
    >
      <el-form-item label="海报上传" style="margin-bottom: 40px">
        <el-upload
          ref="upload"
          :auto-upload="false"
          :on-change="uploadChange"
          :on-progress="uploadPreview"
          :on-success="uploadSuccess"
          :on-error="uploadError"
          :show-file-list="false"
          :on-exceed="uploadExceed"
          action="http://localhost:9999/upload?flag=5"
          list-type="picture-card"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <el-button style="margin-top: 20px" type="primary" @click="uploadImg"
          >点击上传</el-button
        >
      </el-form-item>

      <el-form-item label="电影名称" prop="filmName">
        <el-input v-model="addForm.filmInfo.filmName"></el-input>
      </el-form-item>
      <el-form-item label="电影英文名称" prop="filmEnName">
        <el-input v-model="addForm.filmInfo.filmEnName"></el-input>
      </el-form-item>
      <el-form-item label="影片导演" prop="filmDirector">
        <el-input
          v-model="addForm.directorList"
          placeholder="多个名称请用英文,进行分割"
        ></el-input>
      </el-form-item>
      <el-form-item label="影片主演" prop="filmActor">
        <el-input
          v-model="addForm.actorList"
          placeholder="多个名称请用英文,进行分割"
        ></el-input>
      </el-form-item>
      <el-form-item label="影片时长" prop="filmLength">
        <el-input
          v-model="addForm.filmInfo.filmLength"
          placeholder="默认单位：分钟"
        ></el-input>
      </el-form-item>
      <el-form-item label="影片评分" prop="filmScore">
        <el-input
          v-model="addForm.filmInfo.filmScore"
          placeholder="满分10分，格式：0.0"
        ></el-input>
      </el-form-item>
      <el-form-item label="影片类型" prop="filmCategory">
        <el-checkbox-group v-model="cateChecked">
          <el-checkbox
            v-for="(item, i) in cateList"
            :key="i"
            :label="item.cateName"
            border
            size="medium"
          ></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="影片状态" prop="filmStatus">
        <el-dropdown placement="bottom" @command="clickStatus">
          <el-input v-model="addForm.filmInfo.filmStatus"></el-input>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="上映">上映</el-dropdown-item>
            <el-dropdown-item command="下架">下架</el-dropdown-item>
            <el-dropdown-item command="待上映">待上映</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-form-item>
      <el-form-item label="上映时间" prop="filmShowTime">
        <el-date-picker
          v-model="addForm.filmInfo.filmShowTime"
          type="date"
          placeholder="选择日期"
          :clearable="false"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="年代" prop="filmAge">
        <el-input
          v-model="addForm.filmInfo.filmAge"
          placeholder="示例：2021"
        ></el-input>
      </el-form-item>
      <el-form-item label="区域">
        <el-dropdown placement="bottom" @command="clickArea">
          <el-input v-model="areaName"></el-input>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="item in areaList"
              :key="item.fareaId"
              :command="item"
              >{{ item.fareaName }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      addForm: {
        filmInfo: {
          filmStatus: "",
        },
        actorList: "",
        directorList: "",
      },
      fileList: [],
      imageUrl: "",
      areaList: [],
      areaName: "",
      filmDirector: "",
      filmActor: "",
      cateList: [],
      cateChecked: [],
    };
  },
  created() {
    this.getAreaList();
    this.getCateList();
    let id = this.$route.query.id;
    if (id) {
      this.getFilmById(id);
    }
  },
  methods: {
    uploadImg() {
      this.$refs.upload.submit();
    },
    uploadChange(file, fileList) {
      this.imageUrl = file.url;
    },
    uploadPreview(event, file, fileList) {},
    uploadSuccess(res, file) {
      console.log(res);
      console.log(file);
      this.$message.success(res.message);
      this.addForm.filmInfo.filmPicture = file.response.data.url;
    },
    uploadError(error) {},
    uploadExceed(file, fileList) {},
    clickStatus(command) {
      this.addForm.filmInfo.filmStatus = command;
      console.log(this.addForm.filmInfo.filmStatus);
      console.log(this.addForm);
    },
    clickArea(command) {
      console.log(command);
      this.addForm.filmInfo.filmArea = command.fareaId;
      this.areaName = command.fareaName;
      console.log(this.areaName);
    },
    async getAreaList() {
      const { data: res } = await this.$http.get("/common/filmarea/getList");
      this.areaList = res.data;
      console.log(res);
    },
    async getCateList() {
      const { data: res } = await this.$http.get("common/category/getList");
      if (res.code != 200) {
        this.$message.error(res.message);
      } else {
        this.cateList = res.data;
      }
    },
    async submitForm() {
      if (this.$route.query.id) {
        const { data: res } = await this.$http.post(
          "common/filminfo/editFilm",
          this.addForm.filmInfo,
          {
            params: {
              actorNames: this.addForm.actorList,
              directorNames: this.addForm.directorList,
              filmStyles: this.cateChecked.join(","),
            },
          }
        );
        if (res.code != 200) {
          return this.$message.error(res.message);
        } else {
          this.$router.push("/film");
        }
      } else {
        console.log(this.addForm);
        console.log(this.cateChecked);
        const { data: res } = await this.$http.post(
          "common/filminfo/addFilm",
          this.addForm.filmInfo,
          {
            params: {
              actorNames: this.addForm.actorList,
              directorNames: this.addForm.directorList,
              filmStyles: this.cateChecked.join(","),
            },
          }
        );
        if (res.code != 200) {
          return this.$message.error(res.message);
        } else {
          this.$router.push("/film");
        }
      }
    },
    resetForm() {
      this.$refs.addForm.resetFields();
      this.areaName = "";
      this.imageUrl = "";
    },
    async getFilmById(id) {
      const { data: res } = await this.$http.get("common/filminfo/getFilmById", {
        params: { id: id },
      });
      if (res.code != 200) {
        return this.$message.error(res.message);
      } else {
        this.addForm.filmInfo = res.data;
        this.imageUrl = res.data.filmPicture;

        var cateArray = [];
        var actorArray = [];
        var directorArray = [];
        res.data.categoryList.forEach((element2) => {
          cateArray.push(element2.cateName);
        });
        res.data.actorList.forEach((element2) => {
          actorArray.push(element2.actorName);
        });
        res.data.directorList.forEach((element2) => {
          directorArray.push(element2.directorName);
        });
        this.cateChecked = cateArray;
        this.addForm.actorList = actorArray.reverse().join(",");
        this.addForm.directorList = directorArray.reverse().join(",");

        this.areaName = res.data.area.fareaName;
        this.addForm.filmInfo.filmArea = res.data.area.fareaId;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.avatar {
  width: 140px;
  height: 166px;
}
/deep/.el-input__inner {
  width: 300px;
}
.el-dropdown-menu {
  width: 300px;
}
.el-checkbox {
  margin-right: 0;
}
</style>
